<template>
  <div class="container">
    <div class="tabs-container">
      <u-tabs
        :list="list1"
        @click="onchangeTabs"
        lineHeight="5rpx"
        lineWidth="100rpx"
        :itemStyle="{ width: '150rpx' }"
        :activeStyle="{ color: '#2979ff' }"
        :inactiveStyle="{ color: '#666' }"
      >
      </u-tabs>
    </div>

    <div class="content-container">
      <div v-if="spDataList.length > 0" class="product-list">
        <div v-for="(item, index) in spDataList" :key="index" class="product-card" :class="{ 'fade-in': animationTrigger }" :style="{ animationDelay: index * 0.1 + 's' }">
          <div class="product-content">
            <div class="product-image-container">
              <img :src="'https://www.wantongkonggu.cn/' + item.image" class="product-image" @error="handleImageError(index)" />
            </div>

            <div class="product-info">
              <div class="product-name">{{ item.storeName }}</div>
              <div class="product-stock">库存: {{ item.stock }}</div>
              <div class="product-price">￥{{ item.price }}</div>

              <div class="product-actions">
                <div class="action-button status-button" v-if="item.isShow == 1 && isShow == ''">已上架</div>

                <div @click.stop="gotoEidt(item.id)" class="action-button edit-button">编辑</div>

                <div @click.stop="delSh(item.id)" class="action-button delete-button">删除</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div v-else class="empty-state">
        <u-empty mode="data" text="暂无商品数据" icon="http://cdn.uviewui.com/uview/empty/data.png" marginTop="100"> </u-empty>
      </div>
    </div>

    <u-modal :show="delSpModel" @confirm="delSpFun" @cancel="delSpModel = false" :showCancelButton="true" confirmColor="#e54d42" confirmText="删除" content="是否确认删除该商品?">
    </u-modal>

    <div @click="gotoAdd()" class="add-button" hover-class="add-button-hover">
      <u-icon name="plus" color="#fff" size="20"></u-icon>
      <text class="add-button-text">添加商品</text>
    </div>
  </div>
</template>

<script>
import { productlist, getUserInfo, productDel } from '../../utils/request_sh.js';

export default {
  data() {
    return {
      merId: '',
      pageNum: 1,
      pageSize: 10,
      spDataList: [],
      delSpModel: false,
      delSpId: null,
      isShow: '',
      merName: '',
      animationTrigger: false,
      list1: [
        {
          name: '全部商品'
        },
        {
          name: '上架中'
        },
        {
          name: '已下架'
        }
      ]
    };
  },

  onLoad() {
    const userInfo = uni.getStorageSync('userInfo');
    const merId = userInfo ? userInfo.merId : '';
    getUserInfo(merId).then((res) => {
      uni.setStorageSync('shUserInfo', res.data);
      this.merName = res.data.merName;
      this.getData();
    });
  },

  onShow() {
    const userInfo = uni.getStorageSync('userInfo');
    this.merId = userInfo ? userInfo.merId : '';
    this.getData();
  },

  methods: {
    // 切换商品状态查询
    onchangeTabs(item) {
      if (item.name === '上架中') {
        this.isShow = 1;
      } else if (item.name === '已下架') {
        this.isShow = 0;
      } else {
        this.isShow = '';
      }
      this.getData();
    },

    // 删除商品确认
    delSpFun() {
      productDel(this.delSpId)
        .then((res) => {
          if (res.code === 200) {
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            });
            this.delSpModel = false;
            this.getData();
          } else {
            uni.showToast({
              title: '删除失败',
              icon: 'none'
            });
          }
        })
        .catch((err) => {
          uni.showToast({
            title: '删除出错',
            icon: 'none'
          });
          console.error('删除商品出错:', err);
        });
    },

    // 打开删除确认框
    delSh(id) {
      this.delSpId = id;
      this.delSpModel = true;
    },

    // 跳转到添加商品页面
    gotoAdd() {
      uni.navigateTo({
        url: '/pages_sh/addSp/index'
      });
    },

    // 跳转到编辑商品页面
    gotoEidt(id) {
      uni.navigateTo({
        url: '/pages_sh/editSp/index?id=' + id
      });
    },

    // 获取商品列表数据
    getData() {
      const params = {
        userRightComand: 'shanghuAdmin',
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        merName: this.merName,
        isShow: this.isShow,
        storeType: 3,
        ebMerId: this.merId
      };

      productlist(params)
        .then((res) => {
          this.spDataList = res.rows;
          // 触发动画
          this.animationTrigger = false;
          this.$nextTick(() => {
            this.animationTrigger = true;
          });
        })
        .catch((err) => {
          console.error('获取商品列表失败:', err);
          uni.showToast({
            title: '获取数据失败',
            icon: 'none'
          });
        });
    },

    // 处理图片加载失败
    handleImageError(index) {
      // 可以设置默认图片
      // this.spDataList[index].image = '默认图片路径'
    }
  }
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  font-size: 24rpx;
  background-color: #f5f5f5;
  padding-bottom: 80rpx;
  box-sizing: border-box;
}

.tabs-container {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #fff;
  border-bottom: 1px solid #ededed;
  position: sticky;
  top: 0;
  z-index: 99;
}

.content-container {
  padding: 20rpx;
}

.product-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.product-card {
  background: #ffffff;
  border-radius: 15rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.3s ease;
}

.product-card.fade-in {
  transform: translateY(0);
  opacity: 1;
}

.product-content {
  display: flex;
  padding: 20rpx;
}

.product-image-container {
  width: 160rpx;
  height: 160rpx;
  border-radius: 10rpx;
  overflow: hidden;
  background-color: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-info {
  flex: 1;
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.product-stock {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.product-price {
  font-size: 36rpx;
  color: #ff6b00;
  font-weight: bold;
  margin-top: 10rpx;
}

.product-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20rpx;
  gap: 15rpx;
}

.action-button {
  padding: 10rpx 20rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 100rpx;
  transition: all 0.2s;
}

.action-button:active {
  transform: scale(0.95);
}

.status-button {
  background-color: #f9ae3d;
  color: #fff;
}

.edit-button {
  border: 1px solid #2979ff;
  color: #2979ff;
  background-color: #fff;
}

.delete-button {
  background-color: #e54d42;
  color: #fff;
}

.empty-state {
  text-align: center;
  margin-top: 100rpx;
}

.add-button {
  position: fixed;
  bottom: 30rpx;
  left: 50%;
  transform: translateX(-50%);
  background-color: #2979ff;
  width: 80%;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 30rpx;
  box-shadow: 0 6rpx 20rpx rgba(41, 121, 255, 0.4);
  transition: all 0.3s;
  z-index: 100;
}

.add-button-hover {
  transform: translateX(-50%) scale(0.98);
  box-shadow: 0 2rpx 10rpx rgba(41, 121, 255, 0.3);
}

.add-button-text {
  margin-left: 10rpx;
}

/* 动画定义 */
@keyframes fadeInUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.fade-in {
  animation: fadeInUp 0.4s ease forwards;
}
</style>
